<template>
  <div id="SoundEqTable">
    <div class="SoundContent">
      <div class="title">气囊组件</div>
      <a-table
        :pagination="false"
        bordered
        :columns="columns1"
        :data-source="data1"
      />
    </div>
    <div class="SoundContent">
      <div class="title">位移传感器</div>
      <a-table
        :pagination="false"
        bordered
        :columns="columns2"
        :data-source="data2"
      />
    </div>
    <div class="SoundContent">
      <div class="title">充气单元</div>
      <a-table
        :pagination="false"
        bordered
        :columns="columns3"
        :data-source="data3"
      />
    </div>
    <div class="rightBox">
      <a-button type="primary" style="margin-left: 20%">查看三维场景</a-button>
      <div class="RemoteControl">
        <div class="RemoteControlTitle" style="padding-left: 30%">远程控制</div>
        <a-form
          class="RemoteControlForm"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10 }"
          @submit="handleSubmit"
        >
          <a-form-item label="控制装置">
            <a-select
              v-model="DeviceControl"
              @change="getDeviceNumberList"
              placeholder="请输入"
              style="width: 200px"
            >
              <a-select-option
                v-for="item in DeviceControlList"
                :key="item"
                :value="item"
                >{{ item }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="装置编号">
            <a-select
              v-model="DeviceNumber"
              @change="changeValue"
              placeholder="请输入"
              style="width: 200px"
            >
              <a-select-option
                v-for="item in DeviceNumberList"
                :key="item.name"
                :value="item.name"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="控制数值1">
            <a-input v-model="value1" />
          </a-form-item>
          <a-form-item label="控制数值2">
            <a-input v-model="value2" />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
            <a-button type="primary" html-type="submit" @click="upDataClick">
              确定
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //气囊组件
      columns1: [
        {
          title: "气囊组件",
          dataIndex: "Airsac",
          key: "Airsac",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "气量1",
          dataIndex: "mag1",
          key: "mag1",
        },
        {
          title: "气量2",
          dataIndex: "mag2",
          key: "mag2",
        },
      ], //气囊组件
      data1: [
        {
          key: "1",
          Airsac: "气囊1",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
        {
          key: "2",
          Airsac: "气囊2",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
        {
          key: "3",
          Airsac: "气囊3",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
      ], //气囊组件

      //位移传感器
      columns2: [
        {
          title: "气囊组件",
          dataIndex: "Airsac",
          key: "Airsac",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "气量1",
          dataIndex: "mag1",
          key: "mag1",
        },
        {
          title: "气量2",
          dataIndex: "mag2",
          key: "mag2",
        },
      ], //位移传感器
      data2: [
        {
          key: "1",
          Airsac: "气囊1",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
        {
          key: "2",
          Airsac: "气囊2",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
        {
          key: "3",
          Airsac: "气囊3",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
      ], //位移传感器

      //充气单元
      columns3: [
        {
          title: "气囊组件",
          dataIndex: "Airsac",
          key: "Airsac",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
        },
        {
          title: "气量1",
          dataIndex: "mag1",
          key: "mag1",
        },
        {
          title: "气量2",
          dataIndex: "mag2",
          key: "mag2",
        },
      ], //充气单元
      data3: [
        {
          key: "1",
          Airsac: "气囊1",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
        {
          key: "2",
          Airsac: "气囊2",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
        {
          key: "3",
          Airsac: "气囊3",
          status: "好",
          mag1: 32,
          mag2: 45,
        },
      ], //充气单元

      socket: null,
      messages: null,
      DeviceControl: "", //装置控制下拉框选中的值
      DeviceControlList: [], //装置控制下拉框的下拉选项
      DeviceNumber: "", //装置编号下拉框选中的值
      DeviceNumberList: [], //装置编号下拉框的下拉选项
      dataIndex: null, //装置编号所选值对应的索引ID
      value1: "", //控制数值1
      value2: "", //控制数值2
    };
  },
  beforeDestroy() {
    // 组件销毁时关闭 WebSocket 连接
    this.closeWebSocket();
  },
  created() {
    this.getDeviceControlList(); //获取装置控制下拉框的下拉选项
  },
  mounted() {
    this.connectWebSocket();
  },
  methods: {
    upDataClick() {
      let data = {
        id: this.dataIndex, //装置编号所选值对应的索引ID
        type: this.DeviceControl, //控制装置
        name: this.DeviceNumber, //装置编号
        value1: this.value1,
        value2: this.value2,
      };
      this.$axios.put("/sys/equipment/component", data).then(() => {
        this.$message.success("修改成功");
      });
    },
    changeValue() {
      let data = this.DeviceNumberList.find(
        (item) => item.name == this.DeviceNumber
      );
      this.dataIndex = data.id;
      this.value1 = data.value1;
      this.value2 = data.value2;
    },
    async getDeviceControlList() {
      //获取装置控制下拉框的下拉选项
      let { data } = await this.$axios.get("/sys/equipment/component/type");
      this.DeviceControlList = data.data;
    },
    async getDeviceNumberList() {
      //根据装置控制的选择获取装置编号
      let { data } = await this.$axios.get("/sys/equipment/component/page", {
        params: {
          limit: 9999,
          page: 1,
          componentType: this.DeviceControl, //装置控制选中的值
        },
      });
      this.DeviceNumberList = data.data.list;
    },
    handleSubmit() {
      //点击确定
    },
    connectWebSocket() {
      this.socket = new WebSocket("ws://192.168.2.12:9010/ws/demo"); // 替换为你的 WebSocket 服务器地址

      // 连接成功时的回调
      this.socket.onopen = () => {
        console.log("WebSocket 连接成功");
        this.sendMessage("789");
      };

      // 接收消息时的回调
      this.socket.onmessage = (event) => {
        const message = event.data;
        this.messages.push(message); // 将消息存入数组中
      };

      // 连接关闭时的回调
      this.socket.onclose = () => {
        console.log("WebSocket 连接已关闭");
      };

      // 错误处理
      this.socket.onerror = (error) => {
        console.error("WebSocket 连接错误:", error);
      };
    },

    // 发送消息
    sendMessage(message) {
      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
        console.log(message);
        this.$axios.get("http://192.168.2.12:9010/send/text", {
          params: {
            text: message,
          },
        });
        // this.socket.send(message);
      } else {
        console.error("WebSocket 未连接");
      }
    },

    // 手动关闭连接
    closeWebSocket() {
      if (this.socket) {
        this.socket.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#SoundEqTable {
  display: flex;
  justify-content: space-around;
  .SoundContent {
    width: 340px;
    height: 100%;
    text-align: center;
    .title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  .rightBox {
    width: 320px;
    .RemoteControl {
      margin-top: 20px;
      .RemoteControlTitle {
        background: #00a8e1;
        text-align: justify;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        font-weight: 600;
      }
      .RemoteControlForm {
        margin-top: 10px;
        background: #00a8e1;
        padding-left: 30px;
        padding-top: 30px;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
<style lang="scss">
#SoundEqTable {
  .ant-form-item {
    margin-bottom: 10px;
    .ant-form-item-control-wrapper {
      width: 65%;
      .ant-select {
        width: 100% !important;
      }
      .ant-select-selection {
        border-radius: 0;
        background: #007ca6;
        border: 1px solid white;
      }
      .ant-input {
        border-radius: 0;
        background: #007ca6;
        border: 1px solid white;
      }
      i {
        color: white;
      }
    }
  }
  .RemoteControlForm {
    .ant-col label {
      font-weight: 600;
    }
  }
}
</style>